<script setup>
  import {
    ref,
    reactive,
    onMounted,
    computed
  } from 'vue'
  import http from '@/utils/axios.js'
  import utils from '@/utils/tree.js'
  const data = reactive({
    list: []
  });

  function getData(path, node) {
    let url = 'app/baidu/dir/list'
    if (path) {
      url = 'app/baidu/dir/list?path=' + path
    }
    return http.get(url).then(res => {
      if (node){
        return res
      }
    })
  }
  const props = ref({
    value: 'fs_id',
    label: 'server_filename',
    isLeaf:function(data, node){
      return data.isdir === 0
    }
  })
  const list = computed(() => {
    return data.list
  })
  const treeRef = ref()

  function onNodeClick(data, node, e) {
  }
  function loadNode(node, resolve){
    console.log(node.data.path);
    getData(node.data.path,1).then(res=>{
      resolve(res)
    })
  }
  getData()
</script>

<template>
  <el-tree ref="treeRef" :data="list" node-key='fs_id' :props="props" :load="loadNode" lazy  :height="208" @node-click="onNodeClick">
    <template #default="{ node }">
      <el-icon v-if='node.data.isdir'>
        <Folder />
      </el-icon>
      <el-icon v-else>
        <DocumentRemove />
      </el-icon>
      <span>{{ node.label}}</span>
    </template>
  </el-tree>
</template>

<style scoped>
</style>